{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}互联网段{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skinsfolder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       互联网段管理
      </h1>
      <ol class="breadcrumb">
        <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">互联网段管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action={% url 'conipnet' %}  method="get">
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">网段</label>
                  <textarea id='name' rows='1' class="form-control" name='name'></textarea>
                </div>
                <div class="col-xs-2">
                  <label for="search">状态</label>
                  <select class="form-control" name='ipnet_status' id='ipnet_status'>
                    <option selected value></option>
                    <option value='0'>运营</option>
                    <option value='1'>待分配</option>
                    <option value='2'>已分配</option>
                    <option value='3'>保留</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">类型</label>
                  <select class="form-control" name='ipnet_type' id='ipnet_type'>
                    <option selected value></option>
                    <option value='0'>IDC</option>
                    <option value='1'>IXP</option>
                    <option value='2'>管理</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">区域</label>
                  <select class="form-control" name='zone' id='zone'>
                    <option selected value></option>
                    <option value='0'>上海</option>
                    <option value='1'>北京</option>
                    <option value='2'>广州</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">用途</label>
                  <input type="text" class="form-control" name='usage'>
                </div>
                <div class="col-xs-2">
                  <label for="search">VLAN</label>
                  <input type="text" class="form-control" name='vlan'>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-xs-4">
                  <label for="search">起始端设备</label>
                  <input type="text" class="form-control" name='networkdevice_a'>
                </div>
                <div class="col-xs-4">
                  <label for="search">终止端设备</label>
                  <input type="text" class="form-control" name='networkdevice_z'>
                </div>
              </div>
            </div>
            <p style=" margin:0 auto; text-align:center;">
              <button type="submit" id="searchbutton" align="center" class="btn">查询</button>
            </p>
           </form>
    <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
          <a href= {% url 'assetimport' '互联网段' %}><button type="submit" class="btn btn-default pull-right">互联网段导入</button></a>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="display table table-bordered table-striped">
            <thead>
            <tr>
              <th>网段</th>
              <th>状态</th>
              <th>类型</th>
              <th>区域</th>
              <th>起始端IP</th>
              <th>起始端设备</th>
              <th>起始端设备端口</th>
              <th>终止端IP</th>
              <th>终止端设备</th>
              <th>终止端设备端口</th>
              <th>用途</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
                {% for conipnet in conipnet %}
                <tr>
                  <td id="ipnet_name">{{ conipnet.name }}</td>
                  <td id='edit_ipnet_status'>
                    {% if conipnet.ipnet_status == 0 %}
                    <label class="label label-success">{{ conipnet.get_ipnet_status_display }}</label>
                    {% elif conipnet.ipnet_status == 1 %}
                    <label class="label label-warning">{{ conipnet.get_ipnet_status_display }}</label>
                    {% elif conipnet.ipnet_status == 2 %}
                    <label class="label label-default">{{ conipnet.get_ipnet_status_display }}</label>
                    {% elif conipnet.ipnet_status == 3 %}
                    <label class="label label-danger">{{ conipnet.get_ipnet_status_display }}</label>
                    {% endif %}
                  </td>
                  <td id='edit_ipnet_type'>{{ conipnet.get_ipnet_type_display }}</td>
                  <td id='edit_ipnet_zone'>{{ conipnet.get_zone_display }}</td>
                  <td id='ip_a'>{{ conipnet.ip_a|default:'' }}</td> 
                  <td id='networkdevice_a'>{{ conipnet.networkdevice_a.hostname|default:'' }}</td>
                  <td id='port_a'>{{ conipnet.port_a|default:'' }}</td>
                  <td id='ip_z'>{{ conipnet.ip_z|default:'' }}</td>
                  <td id='networkdevice_z'>{{ conipnet.networkdevice_z.hostname|default:'' }}</td>
                  <td id='port_z'>{{ conipnet.port_z|default:'' }}</td>
                  <td id='usage'>{{ conipnet.usage }}</td>
                  <td id='memo'>{{ conipnet.memo }}</td>
                  <td>
                    <button type="button" class="btn btn-sm btn-info" onclick="editconipnet(this)" id="editconipnet">修改</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="delconipnet(this)" id="delconipnet">删除</button>
                  </td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}
            </tbody>
          </table>
          <form class="form-horizontal content_size" action="{% url 'conipnet' %}" method="post">
            {% csrf_token %}
            <div class="modal fade" id='editconipnetModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改互联网段</h4>
                  </div>
                  <div class="modal-body">
                    <form class="form-horizontal" role="form">
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">网段:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='name' readonly id="edit_name">
                      </div>
                      <label for="modify" class="col-sm-2 control-label">状态:</label>
                      <div class="col-sm-3">
                        <select class="form-control" name='ipnet_status' id='edit_status'>
                          <option value='0' >运营</option>
                          <option value='1' >待分配</option>
                          <option value='2' >已分配</option>
                          <option value='3' >保留</option>
                        </select>
                      </div>  
                    </div>
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">类型:</label>
                      <div class="col-sm-3">
                        <select class="form-control" name='ipnet_type' id='edit_type'>
                            <option value='0' >IDC</option>
                            <option value='1' >IXP</option>
                            <option value='1' >管理</option>
                        </select>
                      </div>
                      <label for="modify" class="col-sm-2 control-label">区域:</label>
                      <div class="col-sm-3">
                        <select class="form-control" name='zone' id='edit_zone'>
                            <option value='0' >上海</option>
                            <option value='1' >北京</option>
                            <option value='1' >广州</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">用途:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='usage' id='edit_usage'>
                      </div>
                      <label for="modify" class="col-sm-2 control-label">VLAN:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='vlan' id='edit_vlan'>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">起始端IP:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='ip_a' id='edit_ip_a'>  
                      </div>
                      <label for="modify" class="col-sm-2 control-label">终止端IP:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='ip_z' id='edit_ip_z'>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">起始端设备:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='networkdevice_a' id='edit_networkdevice_a'>  
                      </div>
                      <label for="modify" class="col-sm-2 control-label">终止端设备:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='networkdevice_z' id='edit_networkdevice_z'>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">起始端端口:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='port_a' id='edit_port_a'>  
                      </div>
                      <label for="modify" class="col-sm-2 control-label">终止端端口:</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name='port_z' id='edit_port_z'>
                      </div>
                    </div> 
                    <div class="form-group">
                      <label for="modify" class="col-sm-2 control-label">备注:</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" name='memo' id='edit_memo'>  
                      </div>
                    </div>   
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" name="submit" value="editconipnet" class="btn btn-primary">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </form>

           <form class="form-horizontal content_size" action="{% url 'conipnet' %}" method="post">
             {% csrf_token %}
             <div class="modal fade" id='delconipnetModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
               <div class="modal-dialog">
                 <div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title">删除网段</h4>
                   </div>
                   <div class="modal-body">
                     <form class="form-horizontal" role="form">
                     <div class="form-group">
                       <label for="modify" class="col-sm-2 control-label">删除网段:</label>
                       <div class="col-sm-4">
                         <input type="text" class="form-control" name='name' readonly id="delipnet_name">
                       </div>
                     </div>
                     <div class="form-group">
                       <label for="modify" class="col-sm-2 control-label">删除原因:<font color='#ff0000'>*</font></label>
                       <div class="col-sm-4">
                         <input type="text" class="form-control" name='del_reason' required>
                       </div>
                     </div>
                    </form>
                   </div>
                   <div class="modal-footer">
                     <button type="submit" name="submit" value="delconipnet" class="btn btn-primary">确认</button>
                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                   </div>
                 </div>
               </div>
             </div>
           </form>
         </div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}
{% block page-script %}
<script src="{% static 'js/mygeturl.js' %}"></script>
<script src="{% static 'js/myipnet.js' %}"></script>
{% endblock %}
